<template>
  <div class="card">
    <h3>订单</h3>
    <form @submit.prevent="create">
      <input v-model="form.orderNumber" placeholder="订单号" required />
      <select v-model.number="form.warehouseId" required>
        <option value="" disabled>选择仓库</option>
        <option v-for="w in warehouses" :key="w.id" :value="w.id">{{ w.name }}</option>
      </select>
      <div style="display:flex; gap:8px; flex-wrap: wrap; align-items: center;">
        <input v-model="item.sku" placeholder="SKU" />
        <input v-model="item.name" placeholder="名称" />
        <input v-model.number="item.quantity" type="number" min="1" placeholder="数量" />
        <button type="button" @click="addItem">添加行</button>
      </div>
      <ul>
        <li v-for="(it, idx) in form.items" :key="idx">{{ it.sku }} / {{ it.name }} × {{ it.quantity }} <button type="button" @click="removeItem(idx)">移除</button></li>
      </ul>
      <button type="submit">创建订单</button>
    </form>

    <table>
      <thead>
        <tr><th>ID</th><th>订单号</th><th>状态</th><th>仓库</th><th>明细</th><th></th></tr>
      </thead>
      <tbody>
        <tr v-for="o in list" :key="o.id">
          <td>{{ o.id }}</td>
          <td>{{ o.orderNumber }}</td>
          <td>{{ o.status }}</td>
          <td>{{ o.warehouse.name }}</td>
          <td>
            <div v-for="it in o.items" :key="it.sku">{{ it.sku }} × {{ it.quantity }}</div>
          </td>
          <td>
            <select v-model="statusMap[o.id]" @change="updateStatus(o.id)">
              <option>NEW</option>
              <option>PROCESSING</option>
              <option>SHIPPED</option>
              <option>DELIVERED</option>
              <option>CANCELLED</option>
            </select>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { api, type CustomerOrder, type OrderItem, type Warehouse } from '../lib/api'

const warehouses = ref<Warehouse[]>([])
const list = ref<CustomerOrder[]>([])
const statusMap = reactive<Record<number, CustomerOrder['status']>>({})

const form = reactive<{ orderNumber: string; warehouseId: number | '' ; items: OrderItem[] }>({ orderNumber: '', warehouseId: '', items: [] })
const item = reactive<OrderItem>({ sku: '', name: '', quantity: 1 })

function addItem() { if (item.sku && item.name && item.quantity>0) { form.items.push({ ...item }); item.sku=''; item.name=''; item.quantity=1 } }
function removeItem(idx: number) { form.items.splice(idx, 1) }

async function load() {
  const [w, o] = await Promise.all([
    api.get<Warehouse[]>('/warehouses'),
    api.get<CustomerOrder[]>('/orders')
  ])
  warehouses.value = w.data
  list.value = o.data
  for (const order of list.value) statusMap[order.id] = order.status
}

async function create() {
  if (!form.warehouseId || form.items.length===0) return
  await api.post('/orders', form)
  form.orderNumber=''; form.warehouseId=''; form.items=[]
  await load()
}

async function updateStatus(id: number) { await api.patch(`/orders/${id}/status`, null, { params: { status: statusMap[id] } }); await load() }

onMounted(load)
</script>


